<template>
  <el-container v-loading="loading">

    <div class="chart-group">
      <div class="title">
        <h3>数据统计</h3>
      </div>
      <div class="charts">
        <el-row>
          <div class="info-group-block">
            <h3>下单用户百分比</h3>
            <p>{{data.per_user_place}}%</p>
          </div>
          <div class="info-group-block">
            <h3>订单总数</h3>
            <p>{{data.num}}</p>
          </div>
          <div class="info-group-block">
            <h3>已完成订单数</h3>
            <p>{{data.complete}}</p>
          </div>
          <div class="info-group-block">
            <h3>取消订单数量</h3>
            <p>{{data.delete}}</p>
          </div>
        </el-row>

        <el-row>
          <div class="info-group-block">
            <h3>折扣数量</h3>
            <p>{{data.discount}}</p>
          </div>
          <div class="info-group-block">
            <h3>折扣金额</h3>
            <p>{{data.discount_price}}</p>
          </div>
          <div class="info-group-block">
            <h3>保险订单数</h3>
            <p>{{data.secure}}</p>
          </div>
          <div class="info-group-block">
            <h3>保险金额</h3>
            <p>{{data.secure_price}}</p>
          </div>
        </el-row>

        <el-row>
          <div class="info-group-block">
            <h3>微信支付订单数</h3>
            <p>{{data.wx_pay}}</p>
          </div>
          <div class="info-group-block">
            <h3>余额支付订单数</h3>
            <p>{{data.balance_pay}}</p>
          </div>
          <div class="info-group-block">
            <h3>平台收入</h3>
            <p>{{data.platform_profit}}</p>
          </div>
          <div class="info-group-block">
            <h3>服务人员收入</h3>
            <p>{{data.runner_profit}}</p>
          </div>
          <div class="info-group-block">
            <h3>催单数</h3>
            <p>{{data.is_dun}}</p>
          </div>
        </el-row>

        <el-row>
          <div class="info-group-block">
            <h3>帮我买</h3>
            <p>{{data.order_type.deliver}}</p>
          </div>
          <div class="info-group-block">
            <h3>帮我送</h3>
            <p>{{data.order_type.give}}</p>
          </div>
          <div class="info-group-block">
            <h3>待排队</h3>
            <p>{{data.order_type.line}}</p>
          </div>
          <div class="info-group-block">
            <h3>代驾</h3>
            <p>{{data.order_type.drive}}</p>
          </div>
          <div class="info-group-block">
            <h3>家政</h3>
            <p>{{data.order_type.homework}}</p>
          </div>
          <div class="info-group-block">
            <h3>代办</h3>
            <p>{{data.order_type.agency}}</p>
          </div>
          <div class="info-group-block">
            <h3>代取</h3>
            <p>{{data.order_type.getgoods}}</p>
          </div>
        </el-row>

        <el-row>
          <div class="info-group-block">
            <h3>积分使用数量</h3>
            <p>{{data.integral}}</p>
          </div>
          <div class="info-group-block">
            <h3>积分抵扣价格</h3>
            <p>{{data.integral_price}}</p>
          </div>
          <div class="info-group-block">
            <h3>优惠券使用数量</h3>
            <p>{{data.coupon}}</p>
          </div>
          <div class="info-group-block">
            <h3>优惠券抵扣价格</h3>
            <p>{{data.coupon_price}}</p>
          </div>
        </el-row>

        <el-row>
          <div class="info-group-block">
            <h3>订单总价</h3>
            <p>{{data.total_price}}</p>
          </div>
          <div class="info-group-block">
            <h3>未送达</h3>
            <p>{{data.not_send}}</p>
          </div>
          <div class="info-group-block">
            <h3>未支付</h3>
            <p>{{data.not_pay}}</p>
          </div>
          <div class="info-group-block">
            <h3>用户未确认</h3>
            <p>{{data.not_confirm}}</p>
          </div>
        </el-row>

      </div>
    </div>

    <div class="chart-group">
      <div class="title">
        <h3>增长分析</h3>
      </div>
      <div class="charts">
        <el-row class="el-fn-btn">
          <el-button type="primary" size="small" @click="changeChartData(1)">近7天数据统计</el-button>
          <el-button type="primary" size="small" @click="changeChartData(2)">近7月数据统计</el-button>
          <el-button type="primary" size="small" @click="changeChartData(3)">近7年数据统计</el-button>
        </el-row>
        <el-row class="el-fn-btn">
          <el-button type="success" size="small" @click="changeChartType('line')">折线图统计</el-button>
          <el-button type="success" size="small" @click="changeChartType('histogram')">柱状图统计</el-button>
          <el-button type="success" size="small" @click="changeChartType('bar')">条形图统计</el-button>
          <el-button type="success" size="small" @click="changeChartType('pie')">饼图统计</el-button>
        </el-row>
        <ve-chart :data="chartData" :settings="chartSettings"></ve-chart>
      </div>
    </div>

  </el-container>

</template>

<script>
  export default {
    mounted: function () {
      let _this = this;
      this.api.getOrderStatistic({}).then(function (res) {
        if (res.code == 1) {
          _this.data = res.data;
        }
      }).catch(function (error) {
        throw new Error(error);
      })

      this.api.getOrderIncreaseStatistic().then(function (res) {
        if (res.code == 1) {
          _this.allChartData = res.data;
          _this.changeChartData();
          _this.loading = false;
        }
      }).catch(function (error) {
        throw new Error(error);
      })
    },
    data() {
      return {
        loading: true,  // 页面加载
        allChartData: null,
        data:{
          "per_user_place":"0",                //类型：Number  必有字段  备注：下单用户百分比，后面直接加%
          "num":"0",                //类型：Number  必有字段  备注：订单总数
          "complete":"0",                //类型：Number  必有字段  备注：已完成订单数，比例自己算
          "delete":"0",                //类型：Number  必有字段  备注：取消订单数量
          "discount":"0",                //类型：Number  必有字段  备注：折扣数量
          "discount_price":"0",                //类型：Number  必有字段  备注：折扣金额
          "secure":"0",                //类型：Number  必有字段  备注：保险订单数
          "secure_price":"0",                //类型：Number  必有字段  备注：保险金额
          "wx_pay":"0",                //类型：Number  必有字段  备注：微信支付订单数
          "balance_pay":"0",                //类型：Number  必有字段  备注：余额支付订单数
          "platform_profit":"0",                //类型：Number  必有字段  备注：平台收入
          "runner_profit":"0",                //类型：Number  必有字段  备注：服务人员收入
          "is_dun":"0",                //类型：Number  必有字段  备注：催单数
          "order_type": {                //类型：Object  必有字段  备注：订单类型
            "deliver":"0",                //类型：Number  必有字段  备注：帮我买
            "give":"0",                //类型：Number  必有字段  备注：帮我送
            "line":"0",                //类型：Number  必有字段  备注：待排队
            "drive":"0",                //类型：Number  必有字段  备注：代驾
            "homework":"0",                //类型：Number  必有字段  备注：家政
            "agency":"0",                //类型：Number  必有字段  备注：代办
            "getgoods":0                //类型：Number  必有字段  备注：代取
          },
          "integral":"0",                //类型：Number  必有字段  备注：积分使用数量
          "integral_price":"0",                //类型：Number  必有字段  备注：积分抵扣价格
          "coupon":"0",                //类型：Number  必有字段  备注：优惠券使用数量
          "coupon_price":"0",                //类型：Number  必有字段  备注：优惠券抵扣价格
          "total_price":"0",                //类型：Number  必有字段  备注：订单总价
          "not_send":"0",                //类型：Number  必有字段  备注：未送达
          "not_pay":"0",                //类型：Number  必有字段  备注：未支付
          "not_confirm":""                //类型：Number  必有字段  备注：用户未确认
        },
        chartSettings: {type: "line"},
        chartData: {
          columns: ['日期', '总数','已完成数','退单数','未送达','未支付','用户未确认'],
          rows: [
            {'日期': '', '总数': "",'已完成数': "",'退单数':"",'未送达':"",'未支付':"",'用户未确认':""},
          ]
        },  // 图表数据
      }
    },
    methods: {
      /**
       * 修改图表数据
       */
      changeChartData(type = 1) {
        let _this = this;
        if (!_this.allChartData) {
          return false;
        }
        let tempArr = [];
        let dataType = "";
        if (type == 1) {
          dataType = "day";
        } else if (type == 2) {
          dataType = "month";
        } else if (type == 3) {
          dataType = "year";
        }
        _this.allChartData[dataType].forEach(function (item, index) {
          tempArr.push({
            "日期": item.date,
            "总数": item.count,
            "已完成数": item.confirm,
            "退单数": item.apply_delete,
            "未送达": item.not_send,
            "未支付": item.not_pay,
            "用户未确认": item.not_confirm
          });
        })
        _this.chartData.rows = tempArr.reverse();;
      },
      /**
       *
       */
      changeChartType(type = "line") {
        this.chartSettings.type = type;
      }
    }
  }
</script>

<style scoped>
  .el-container {
    width: 100%;
    display: block;
  }

  .chart-group {
    width: 100%;
    margin: 50px 0;
    overflow: hidden;
    float: left;
  }

  .ve-line {
    width: 95% !important;
    height: 400px !important;
    margin: 0 auto;
  }

  .info-group-block {
    flex: 1;
    max-width: 23%;
    display: inline-block;
    margin: 15px 0 15px 1%;
    text-align: center;
    color: #ffffff;
    padding: 20px 15px;
    border-radius: 3px;
  }

  .info-group-block h3, .info-group-block p {
    font-size: 18px;
    margin: 0;
    padding: 0;
  }

  .info-group-block p {
    margin-top: 10px;
    font-size: 16px;
  }

  .info-group-block:nth-child(1n) {
    background: #F78068;
  }

  .info-group-block:nth-child(2n) {
    background: #65AEDA;
  }

  .info-group-block:nth-child(3n) {
    background: #60E69C;
  }

  .info-group-block:nth-child(4n) {
    background: #F7B276;
  }


  .chart-group {
    width: 95%;
    box-shadow: 0 0 10px #eee;
    display: inline-block;
    margin: 30px 0 30px 2.5%;
  }

  .chart-group:hover {
    box-shadow: 0 0 10px #ddd;
  }

  .chart-group .title {
    margin: 15px;
    overflow: hidden;
    border-bottom: 1px solid #eee;
  }

  .chart-group .title h3 {
    font-size: 24px;
  }

  .el-row {
    margin: 0 15px 0 0;
    display: flex;
  }

  .el-fn-btn{
    display: block;
    margin: 0 0 15px 15px;
  }

</style>
